{% extends "PC/template.html" %}

{% block title %}
腾讯元宝 图像生成
{% endblock %}

{% block css %}
<style>
    .public-flex-3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .chat-container {
        max-height: 300px;
        /* 设置最大高度 */
        overflow-y: auto;
        /* 垂直方向自动显示滚动条 */
        overflow-x: hidden;
        /* 隐藏水平滚动条 */
        margin: 0 auto;
        padding: 20px;
    }

    .message-item {
        display: flex;
        margin-bottom: 20px;
        width: 100%;
    }

    .message-item.user {
        justify-content: flex-end;
    }

    .message-content {
        max-width: 70%;
        padding: 12px 16px;
        border-radius: 8px;
        position: relative;
        word-wrap: break-word;
    }

    .message-content p {
        display: inline-block;
    }

    .message-item .avatar {
        width: 40px;
        height: 40px;
        margin: 0 10px;
    }

    .message-item .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }



    .message-item.ai .message-content {
        background-color: #f0f0f0;
        color: #333;
        margin-left: 10px;
    }

    .message-item.ai .message-content::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 12px;
        border: 6px solid transparent;
        border-right-color: #f0f0f0;
    }

    .message-item.user .message-content {
        background-color: #409EFF;
        color: white;
        margin-right: 10px;
    }

    .message-item.user .message-content::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 12px;
        border: 6px solid transparent;
        border-left-color: #409EFF;
    }
</style>
<style>
    .panel {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .panel-header {
        padding: 10px;
        background-color: #f0f0f0;
        cursor: pointer;
        font-size: 14px;
    }

    .panel-content {
        padding: 10px;
        font-size: 14px;
        color: #a0a0a0;
        display: block;
        /* 默认展开 */
    }
</style>
<style>
    .chat-box {
        width: 100%;
        margin: 20px auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .message-area {
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .prompt {
        color: #666;
        font-size: 14px;
        line-height: 1.4;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        padding: 12px;
    }
</style>
<style>
    .message-input {
        position: relative;
        margin: 10px;
        margin-top: -20px;
        border-top: 1px solid #eee;
    }
</style>
<style>
    .image-container {
        display: flex;
        flex-wrap: wrap;
        /* width: 400px; */
        border: 1px solid #ccc;
        padding: 10px;
    }

    .image-item {
        width: calc(50% - 20px);
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
    }

    .image-item img {
        width: 100%;
        height: auto;
    }
</style>
<style>
    .style-container {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
    }

    .style-picker {
        display: flex;
        gap: 15px;
        padding: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;
        background: white;
        scrollbar-width: none;
        /* 隐藏滚动条 */
    }

    .style-picker::-webkit-scrollbar {
        display: none;
    }

    .style-item {
        width: 120px;
        height: 120px;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* 新增导航箭头样式 */
    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        opacity: 0.9;
        transition: opacity 0.3s;
    }

    .nav-arrow:hover {
        opacity: 1;
    }

    .arrow-left {
        left: -16px;
    }

    .arrow-right {
        right: -16px;
    }

    /* 文字截断处理 */
    .style-label {
        /* height: 40px; */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        background: #f8f9fa;
        padding: 0 5px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
{% endblock %}


{% block content %}
{% csrf_token %}
<div style="padding: 15px;">
    <div class="layui-card layui-panel">
        <div class="layui-card-header public-flex-3">
            <!-- <div>
                <span>当前模型: </span>
                <span id="currentModel"></span>
            </div> -->
            <div class="layui-form">
                <!-- <select lay-filter="AiModelSelect" id="AiModelSelect">
                    <option value="">你的模型</option>
                    <optgroup label="腾讯元宝">
                        <option value="hunyuan_gpt_175B_0404">hunyuan(基础)</option>
                        <option value="deep_seek_v3">deep_seek_v3(基础)</option>
                        <option value="hunyuan_t1">hunyuanT1(深度思考)</option>
                        <option value="deep_seek">deep_seek(深度思考)</option>
                    </optgroup>
                </select> -->
            </div>
        </div>
        <div class="layui-card-body">
            <div class="chat-container">
                <!-- <div class="message-item ai">
                    <div class="avatar">
                        <img src="/static/images/shizi.jpg" alt="头像">
                    </div>
                    <div class="message-content">
                        <div class="panel">
                            <div class="panel-header" onclick="togglePanel(this)">深度思考中... (点击展开、收缩)</div>
                            <div class="panel-content">
                                ${data.content}
                            </div>
                        </div>
                        <p>你好，我是AI机器人，有什么可以帮你的吗？</p>

                        <div class="image-container">
                            <div class="image-item ">
                                <p class="progress-text">进度: <span>100</span>%</p>
                                <img src="https://picsum.photos/200/200?random=1" alt="Image 1">
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- <div class="message-item user">
                    <div class="message-content">
                        <p>你好，我想问一个问题</p>
                    </div>
                    <div class="avatar">
                        <img src="/static/images/xjj1.jpg" alt="头像">
                    </div>
                </div> -->


            </div>

        </div>
    </div>

</div>

<div class="message-input">


    <div class="chat-box">
        <div class="message-area">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-on="test-offset-b">
                <i class="layui-icon layui-icon-theme"></i> 风格
            </button>

            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-on="page-edit-img">
                <i class="layui-icon layui-icon-edit"></i> 编辑图片
            </button>
        </div>
        <div class="message-area fege_tags">
        </div>
        <div class="input-wrapper">
            <textarea class="layui-textarea" placeholder="输入消息..."
                style="flex: 1; margin-right: 10px; resize: none; height: 100px;"></textarea>
            <button class="layui-btn layui-btn-normal layui-btn-radius" lay-on="send">
                <i class="layui-icon layui-icon-release"></i> 发送
            </button>
        </div>
    </div>


</div>


{% endblock %}

{% block js %}
<script>
    
    function togglePanel(header) {
        const content = header.nextElementSibling;
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    }

</script>
<script>
    let chat_id = '';
    axios({
        method: "get",
        url: "/api/TengXunYuanBao/JiChuBan/create_new_chat/",
    }).then(res => {
        chat_id = res.data.id;
        console.log('对话ID创建成功', res.data.id);

    }).catch(err => {
        console.log(err);
        alert('对话ID创建失败, 请刷新页面重试')
    })
</script>
<script>
    const selectorContainer = document.querySelector('.selector-container');
    let selectedItem = null;

    function scrollLeft() {
        if (selectorContainer) {
            selectorContainer.scrollBy({
                left: -120,
                behavior: 'smooth'
            });
        }
    }

    function scrollRight() {
        if (selectorContainer) {
            selectorContainer.scrollBy({
                left: 120,
                behavior: 'smooth'
            });
        }
    }

    function selectStyle(item) {
        if (selectedItem) {
            selectedItem.classList.remove('selected');
        }
        item.classList.add('selected');
        selectedItem = item;
    }
    // 自动滚动到底部函数
    function scrollToBottom() {
        var chatContainer = document.querySelector('.chat-container');
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
</script>
<script>
    let styles = [
        // {
        //     "icon": "https://hunyuan-base-prod-1258344703.cos.ap-guangzhou.myqcloud.com/text2image/public/creative_session/20240812/ic_category_photography.png",
        //     "styleData": [
        //         {
        //             "style": "人像摄影风格",
        //             "styleName": "人像摄影",
        //             "url": "https://hunyuan-base-prod-1258344703.cos.ap-guangzhou.myqcloud.com/text2image/public/AI画图/style_人像摄影_1x1.png"
        //         }
        //     ],
        //     "type": "摄影"
        // }
    ];
    function getStyle() {
        axios({
            method: "get",
            url: "/api/TengXunYuanBao/Image/get_style/"
        }).then(res => {
            console.log(res.data);
            res.data.extra.imageFineTuningV2.styleFunction.styleTextListV2.map(item => {
                item.styleData.map(item1 => {
                    styles.push(item1)
                })

            })
        }).catch(err => {
            console.log(err);

        })
    }
    getStyle()

    // 机器人信息
    function RobotMessage(message) {
        // 生成当前时间戳
        let timestamp = 'message-item-' + new Date().getTime();

        // 用原生JS向chat-container添加机器人信息
        var chatContainer = document.querySelector('.chat-container');
        var messageItem = document.createElement('div');
        messageItem.classList.add('message-item', 'ai', timestamp);
        var avatar = document.createElement('div');
        avatar.classList.add('avatar');
        avatar.innerHTML = '<img src="/static/images/shizi.jpg" alt="头像">';
        messageItem.innerHTML = '<div class="avatar">' + avatar.innerHTML + '</div><div class="message-content">' + message + '</div> ';
        chatContainer.appendChild(messageItem);
        return timestamp;
    }


    function UserMessage(message, style, chat_id) {
        // 用原生JS向chat-container添加用户信息
        var chatContainer = document.querySelector('.chat-container');
        var messageItem = document.createElement('div');
        var avatar = document.createElement('div');
        avatar.classList.add('avatar');
        avatar.innerHTML = '<img src="/static/images/xjj1.jpg" alt="头像">';
        messageItem.classList.add('message-item', 'user');
        messageItem.innerHTML = '<div class="message-content">' + message + '</div> <div class="avatar">' + avatar.innerHTML + '</div>';
        chatContainer.appendChild(messageItem);
        scrollToBottom();

        // 创建 EventSource 连接
        const url = `/api/TengXunYuanBao/Image/create_img/?prompt=${message}&style=${style}&chat_id=${chat_id}`;
        const eventSource = new EventSource(url);
        let robot_message_timestamp = RobotMessage("正在理解...");
        // 定义一个变量代表第一次创建
        let first_create = false;
        eventSource.onmessage = (event) => {

            let data = JSON.parse(event.data);
            if (data.type == "end") {
                eventSource.close();
                return;
            }
            if (first_create == false) {
                // 第一次创建
                first_create = true;
                document.querySelector(`.${robot_message_timestamp} .message-content`).innerHTML = `
                <div class="image-container">
                     <div class="image-item ">
                            <p class="progress-text">进度: <span>0</span>%</p>
                    </div>   
                     <div class="image-item ">
                            <p class="progress-text">进度: <span>0</span>%</p>
                    </div> 
                     <div class="image-item ">
                            <p class="progress-text">进度: <span>0</span>%</p>
                    </div> 
                     <div class="image-item ">
                            <p class="progress-text">进度: <span>0</span>%</p>
                    </div> 
                </div>
              `;
            } else {
                // 后续创建
                if (data.type == "progress") {
                    // 进度条
                    let idx = -1;
                    // 判断有没有指定的key
                    if (data.hasOwnProperty('idx')) {
                        // 找到指定的key
                        idx = data.idx;
                    } else {
                        // 没有找到指定的key
                        idx = 0;
                    }
                    if (idx == -1) {
                        eventSource.close();
                    } else {
                        console.log(`${idx} 个 创建完毕`);
                        let progress_text = document.querySelectorAll(`.${robot_message_timestamp} .message-content p`)[idx]
                        if (progress_text != undefined) {
                            progress_text.querySelector("span").innerHTML = data.value
                        }
                    }
                } else if (data.type == "image") {
                    // 图片
                    let idx = -1;
                    if (data.hasOwnProperty('idx')) {
                        idx = data.idx;
                    } else {
                        idx = 0;
                    }
                    if (idx == -1) {
                        eventSource.close();
                    }
                    else {
                        document.querySelectorAll(`.${robot_message_timestamp} .message-content .image-item`)[idx].innerHTML = `
                        <img style="width:135px;height:135px;" lay-on="test-tips-photos" src="${data.imageUrlLow}" alt="${data.prompt}">
                        `
                    }
                }
            }
            console.log(data);
        }

        eventSource.onerror = (error) => {
            console.error('EventSource failed:', error);
            eventSource.close();
            throw new Error('流式请求失败');
        };
    }
</script>
<script>
    let tag_bar = 0;
</script>
<script>
    layui.use(function () {
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var tabs = layui.tabs;
        var upload = layui.upload;
        var element = layui.element;
        // 事件
        util.on('lay-on', {
            'send': function () {
                var message = $('.layui-textarea').val();
                let fege_tag = document.querySelector('.fege_tag');
                // 判断message是否为空
                if (message == '') {
                    layer.msg('请输入消息');
                    return;
                } else if (fege_tag == null || fege_tag == undefined || fege_tag == '') {
                    layer.msg('请选择风格');
                    return;
                }

                $('.layui-textarea').val('');

                UserMessage(message, fege_tag.innerHTML, chat_id);



                console.log('发送消息', message);
            },

            'test-offset-b': function () {
                let fege_html = `
                 <div class="style-container">
        <div class="nav-arrow arrow-left" id="prevBtn">←</div>
        <div class="nav-arrow arrow-right" id="nextBtn">→</div>
        
        <div class="style-picker" id="stylePicker">
            <!-- 动态生成内容 -->
        </div>
    </div>`
                layer.open({
                    type: 1,
                    offset: 'b',
                    title: '生成的图片风格',
                    anim: 'slideUp', // 从下往上
                    area: ['100%', '300px'],
                    shade: 0.1,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-b',
                    content: fege_html
                });



                const picker = document.getElementById('stylePicker');
                const prevBtn = document.getElementById('prevBtn');
                const nextBtn = document.getElementById('nextBtn');

                // 生成风格项
                styles.forEach(style => {
                    const item = document.createElement('div');
                    item.className = 'style-item';
                    item.innerHTML = `
                <div class="style-label">${style.styleName}</div>
                <div class="style-preview" style="height: 100px; ">
                    <img src="${style.url}" style="width:100%;height:100%;"/>
                    </div>

            `;
                    // 添加点击事件监听
                    item.addEventListener('click', () => {
                        console.log(item);
                        const tags = document.querySelector('.fege_tags');
                        // 判断风格属性span是否存在
                        if (tags.querySelector('.fege_tag')) {
                            tags.querySelector('.fege_tag').remove();
                        }
                        let tag = document.createElement('span');
                        tag.className = 'layui-bg-green fege_tag';
                        tag.innerHTML = style.styleName;
                        tags.appendChild(tag);
                        layer.closeAll("page");
                    });

                    picker.appendChild(item);
                });

                // 导航控制
                let scrollPosition = 0;
                const itemWidth = 120 + 15; // 元素宽度 + 间隙

                nextBtn.addEventListener('click', () => {
                    const visibleItems = Math.floor(picker.clientWidth / itemWidth);
                    scrollPosition += itemWidth * visibleItems;
                    picker.scrollTo({
                        left: scrollPosition,
                        behavior: 'smooth'
                    });
                });

                prevBtn.addEventListener('click', () => {
                    const visibleItems = Math.floor(picker.clientWidth / itemWidth);
                    scrollPosition = Math.max(0, scrollPosition - itemWidth * visibleItems);
                    picker.scrollTo({
                        left: scrollPosition,
                        behavior: 'smooth'
                    });
                });

                // 自动隐藏边缘箭头
                picker.addEventListener('scroll', () => {
                    prevBtn.style.display = picker.scrollLeft === 0 ? 'none' : 'flex';
                    nextBtn.style.display = picker.scrollLeft + picker.clientWidth >= picker.scrollWidth ? 'none' : 'flex';
                });

                // 初始隐藏左箭头
                prevBtn.style.display = 'none';
            },
            'test-tips-photos': function () {
                console.log();
                let imgs = this.parentNode.parentNode.querySelectorAll("img");
                let img_list = []
                for (let i = 0; i < imgs.length; i++) {
                    img_list.push({
                        "alt": imgs[i].alt,
                        "pid": i,
                        "src": imgs[i].src,
                    })
                }

                layer.photos({
                    photos: {
                        "title": "AI生成图,请注意甄别",
                        "start": 0,
                        "data": img_list
                    }
                });
            },
            "download_img": () => {
                let img_src = document.querySelector(".edit_img_img_document").src;
                if (img_src == undefined || img_src == '') {
                    layer.msg('请上传图片');
                    return;
                } else {
                    const a = document.createElement('a');
                    a.href = img_src;
                    a.download = "我的AI生成图.png";
                    a.click();
                }
            },
            "remove_watermark": () => {
                let img_src = document.querySelector(".edit_img_img_document").src;
                console.log(img_src);
                
                if (img_src == undefined || img_src == '') {
                    layer.msg('请上传图片');
                    return;
                } else {
                    var loadIndex = layer.load(2);
                    // 模拟关闭
                    setTimeout(function () {
                        layer.close(loadIndex)
                    }, 1500);
                    console.log(img_src);
                    // 创建 EventSource 连接
                    const url = `/api/TengXunYuanBao/Image/remove_watermark/?img_path=${encodeURIComponent(img_src)}`;
                    const eventSource = new EventSource(url);
                    eventSource.onmessage = (event) => {

                        let data = JSON.parse(event.data);

                        if (data.type == "end") {
                            eventSource.close();
                            return;
                        } else if (data.type == "error") {
                            layer.msg(data.msg, { icon: 2 });
                            eventSource.close();
                            return;
                        }
                        else {
                            if (data.type == "progress") {

                                element.progress('demo-filter-progress', (data.value * 100).toFixed(2) + '%'); // 设置进度
                                console.log(data.value, (data.value * 100).toFixed(2) + '%');
                            } else if (data.type == "removewatermark") {
                                layer.msg('去除水印成功', { icon: 1 });
                                document.querySelector(".edit_img_img_document").src = data.thumbnailUrl;
                                element.progress('demo-filter-progress', '0%'); // 设置 50% 的进度
                            }
                        }

                    }
                    eventSource.onerror = (error) => {
                        eventSource.close();
                        throw new Error('流式请求失败');
                    }
                }

            },
            "img_sharpen": () => {
                let img_src = document.querySelector(".edit_img_img_document").src;
                if (img_src == undefined || img_src == '') {
                    layer.msg('请上传图片');
                    return;
                }
                var loadIndex = layer.load(2);
                // 模拟关闭
                setTimeout(function () {
                    layer.close(loadIndex)
                }, 1500);
                console.log(img_src);
                // 创建 EventSource 连接
                const url = `/api/TengXunYuanBao/Image/sharpen?img_path=${encodeURIComponent(img_src)}`;
                const eventSource = new EventSource(url);
                eventSource.onmessage = (event) => {
                    let data = JSON.parse(event.data);
                    if (data.type == "end") {
                        eventSource.close();
                        return;
                    }
                    else {
                        if (data.type == "progress") {
                            element.progress('demo-filter-progress', (data.value * 100).toFixed(2) + '%'); // 设置进度
                            console.log(data.value, (data.value * 100).toFixed(2) + '%');
                        }
                        else if (data.type == "clarity") {
                            layer.msg('变清晰成功', { icon: 1 });
                            document.querySelector(".edit_img_img_document").src = data.thumbnailUrl;
                            element.progress('demo-filter-progress', '0%'); // 设置 50% 的进度
                        }
                    }

                }
                eventSource.onerror = (error) => {
                    eventSource.close();
                    throw new Error('流式请求失败');
                }

            },
            "show_jiutu": () => {
                console.log(this);
                
                let img_src = document.querySelector(".edit_img_img_document_kiutu");
                if (img_src == undefined || img_src == '') {
                    layer.msg('请上传图片');
                    return;
                }
                if (img_src.style.display == "none") {
                    img_src.style.display = "block";
                    document.querySelectorAll(".show_jiutu")[tag_bar].innerHTML = "隐藏旧图";
                } else {
                    img_src.style.display = "none";
                    document.querySelectorAll(".show_jiutu")[tag_bar].innerHTML = "查看旧图";
                }



            },
            'WangLuoTu_Qding': () => {
                let WangLuoTuHref = document.querySelector("#WangLuoTuHref").value
                console.log(WangLuoTuHref,);
                if (WangLuoTuHref == undefined || WangLuoTuHref == '') {
                    layer.msg('请输入链接');
                    return;
                }
                var loadIndex = layer.load(2);
                // 模拟关闭
                setTimeout(function () {
                    layer.close(loadIndex)
                }, 1500);
                document.querySelector(".edit_img_img_document").src = WangLuoTuHref;
                document.querySelector(".edit_img_img_document_kiutu").src = WangLuoTuHref;

            },
            "page-edit-img": () => {
                layer.open({
                    type: 1,
                    area: ['100%', '100%'],
                    title: "AI编辑图片",
                    content: `
                    <div id="demoTabs2"></div>
                    `
                });

                let BianJiTuChengPinQu = `
                <div class="layui-panel chengasdasjncc" style="margin:20px 0;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-font-gray">对图片做些什么?</div>
                        <div style="padding: 15px;">
                            <button type="button" class="layui-btn layui-bg-blue" lay-on="remove_watermark">
                                去除水印
                            </button>
                            <button type="button" class="layui-btn layui-bg-blue" lay-on="img_sharpen">
                                变清晰
                            </button>
                        </div>
                    </div>
                </div>
                <hr class="layui-border-green">
                <div class="layui-panel" style="margin:20px 0;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-font-gray">效果成品预览区</div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo-filter-progress">
                            <div class="layui-progress-bar" lay-percent="0%"></div>
                        </div>
                        <div style="padding: 15px; display:flex;">
                            <div style="display:flex;" class="panel_img_chengpintu">
                                <img style="height:450px;"  class="edit_img_img_document" alt=""成品图/>
                                <img style="height:450px;display:none;"  class="edit_img_img_document_kiutu" alt=""旧图/>
                            </div>
                            <div style="margin-left:30px; width:300px;">
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-primary layui-border-blue" lay-on="download_img">下载此图</button>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn layui-btn-primary layui-border-blue show_jiutu" lay-on="show_jiutu">查看旧图</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;

                const BeDiChuanTu_html = `
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i> 单图片上传
                </button>
                <div style="width: 135px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            ${BianJiTuChengPinQu}
                
                `;
                let WanguoChuanTu_html = `
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        网络图片链接
                    </div>
                    <input type="text" placeholder="请在此处输入网络图" class="layui-input" id="WangLuoTuHref">
                    <div class="layui-input-suffix">
                        <button class="layui-btn layui-btn-primary" lay-on="WangLuoTu_Qding">确定</button>
                    </div>
                </div>
                ${BianJiTuChengPinQu}
                `;

                tabs.render({
                    elem: '#demoTabs2',
                    header: [
                        { title: '本地传图' },
                        { title: '网络传图' },
                    ],
                    body: [
                        { content: BeDiChuanTu_html },
                        { content: WanguoChuanTu_html },
                    ],
                    index: tag_bar, // 初始选中项
                    // className: 'layui-tabs-card',
                    // closable: true
                });
                tabs.on('afterChange(demoTabs2)', function (data) {
                    tag_bar = data.index;
                    // 删除元素
                   let panel_img_chengpintuAll = document.querySelectorAll(".panel_img_chengpintu")
                   
                   for (let index = 0; index < panel_img_chengpintuAll.length; index++) {
                        if(index == data.index){
                           panel_img_chengpintuAll[index].innerHTML = `
                            <img style="height:450px;"  class="edit_img_img_document" alt=""成品图/>
                                <img style="height:450px;display:none;"  class="edit_img_img_document_kiutu" alt=""旧图/>
                                `
                        } else {
                            panel_img_chengpintuAll[index].innerHTML = `
                            `
                        }
                    
                   }
                });
                element.render('progress', 'demo-filter-progress');

                var uploadInst = upload.render({
                    elem: '#ID-upload-demo-btn',
                    url: '/api/system/ToolsUpdate/upload_img/', // 实际使用时改成您自己的上传接口即可。
                    headers: {
                        'X-CSRFToken': get_csrfmiddlewaretoken()
                    },
                    accept: 'images', // 只允许上传图片
                    before: function (obj) {
                        // 预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                        });

                        element.progress('filter-demo', '0%'); // 进度条复位
                        layer.msg('上传中', { icon: 16, time: 0 });
                    },
                    done: function (res) {
                        // 若上传失败
                        if (res.code != 200) {
                            return layer.msg('上传失败');
                        }
                        // 上传成功的一些操作
                        // …
                        document.querySelector('.edit_img_img_document').src = res.response.resourceUrl;
                        document.querySelector('.edit_img_img_document_kiutu').src = res.response.resourceUrl;
                        $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                    },
                    error: function () {
                        // 演示失败状态，并实现重传
                        var demoText = $('#ID-upload-demo-text');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    },
                    // 进度条
                    progress: function (n, elem, e) {
                        element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                        if (n == 100) {
                            layer.msg('上传完毕', { icon: 1 });
                        }
                    }
                });
            }
        });
    });
</script>



{% endblock %}